<template>
	<n-popover trigger="hover">
		<template #trigger>
			<div
				class="h-[18px] rounded-sm px-[6px] flex items-center -skew-x-[12deg] opacity-90 cursor-pointer"
				style="background: linear-gradient(180deg, #05235f -1.92%, #035ec7 98.9%)">
				<base-image src="account/tag-roi" class="h-[10px] mr-[2px]" />
				<div class="text-white text-[11px] font-[Helvetica] font-bold">{{ data }}%</div>
			</div>
		</template>
		<div class="account-tag-roi">
			<div class="title">
				<span class="dot"></span>
				<span class="text">ROI</span>
				<span class="dot"></span>
			</div>
			<div class="desc">
				{{ $t('account.tagRoi', [memberStore.roiDays]) }}
			</div>
			<div class="divider"></div>
			<div class="rule">
				ROI =
				<div class="text">
					<div>({{ $t('betting.winAmount') }} - {{ $t('betting.betAmount') }})</div>
					<div class="text-divider"></div>
					<div>{{ $t('betting.betAmount') }}</div>
				</div>
				x 100%
			</div>
		</div>
	</n-popover>
</template>

<script lang="ts" setup>
import { NPopover } from 'naive-ui'
import { BaseImage } from '@/components/base'
import { useMemberStore } from '@/store'
defineProps({
	data: {
		type: Number
	}
})
const memberStore = useMemberStore()
</script>

<style lang="scss" scoped>
@use '@/styles/mixins.scss' as *;
.account-tag-roi {
	z-index: 1000;
	width: 277px;
	padding: 5px 12px 15px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	opacity: 0.9;
	.title {
		height: 20px;
		@include flex-center();
		.text {
			margin: 0 8px;
			@include font-bold();
		}
		.dot {
			@include radius(4px);
			background-color: var(--color-text-3);
		}
	}
	.desc {
		line-height: 20px;
	}
	.divider {
		margin: 5px 0;
		height: 1px;
		background-color: var(--color-border-3);
	}
	.rule {
		@include flex-center();
		font-size: 12px;
		color: var(--color-text-3);
		.text {
			margin: 0 4px;
			.text-divider {
				height: 1px;
				background-color: var(--color-text-3);
			}
		}
	}
}
</style>
